﻿@{
    Layout = null;
}
<style type="text/css">
    ul {
        list-style: none;
        padding-left: 0px;
    }

    .uploadpic > li:first-child {
        background: url(/Content/img/camera-upload.png) no-repeat center;
    }

    .control-label {
        max-width: 130px;
    }

    .uploadpic > li {
        display: inline-block;
        position: relative;
        display: inline-block;
        border-radius: 4px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        height: 50px;
        width: 50px;
        margin-right: 10px;
    }

    .file {
        position: relative;
        display: inline-block;
        border-radius: 4px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        height: 50px;
        width: 50px;
    }

        .file input {
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            width: 50px;
            height: 50px;
        }

    #PreviewImg {
        display: inline-block;
        width: 50px;
        height: 50px;
    }
</style>

<div class="panel-body" style="padding:0">
    <div class="panel panel-default">
        <div class="panel-heading"></div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group">
                    <label class="control-label" for="nickname_search">昵称:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="nickname_search" placeholder="请输入用户昵称">
                    </div>
                    <label class="control-label" for="tel_search">手机号:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="tel_search" placeholder="请输入用户手机号">
                    </div>
                    <div class="col-sm-3">
                        <button type="button" id="btnQueryList" class="btn btn-primary"><i class="fa fa-search"></i>查询</button>
                        <button type="button" id="btnReset" class="btn btn-primary"><i class="fa fa-remove"></i>清空</button>
                    </div>
                </div>
            </form>
            <hr />
            <div>
                <table id="userinfo"></table>
            </div>
        </div>
    </div>
</div>

<div id="toolbar" class="btn-group">
    <button id="btnAddDialog" type="button" class="btn btn-primary"><span><i class="fa fa-user-plus"></i>&nbsp;添加</span></button>
    <button id="btnUpdateUserTypeDialog" type="button" class="btn btn-primary"><span><i class="fa fa-edit"></i>&nbsp;更改类别</span></button>
    <button id="btnQueryAddRess" type="button" class="btn btn-primary"><span><i class="fa fa-book"></i>&nbsp;查看收货地址</span></button>
    <button id="btnInvitationCode" type="button" class="btn btn-primary"><span><i class="fa fa-book"></i>&nbsp;查看邀请人</span></button>
    <button id="btnResetPwd" type="button" class="btn btn-primary"><span><i class="fa fa-refresh"></i>&nbsp;重置密码</span></button>
    <button id="btnDeleteUserDialog" type="button" class="btn btn-primary"><span><i class="fa fa-remove"></i>&nbsp;删除</span></button>
    <button id="btnDetailDialog" type="button" class="btn btn-primary"><span><i class="fa fa-book"></i>&nbsp;详情</span></button>
</div>

@*添加编辑浮层*@
<div class="modal fade" id="AddEditModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title" id="HeadTitle">用户信息添加</h4>
            </div>
            <div class="modal-body">
                <form id="userOperation" method="post" class="form-horizontal">
                    <input type="hidden" id="Id" name="Id" />
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><em style="color:red">*</em>用户名:</span>
                            <input type="text" id="NickName" name="NickName" placeholder="请您输入用户名(用于登录系统)" maxlength="20" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><em style="color:red">*</em>姓名:</span>
                            <input type="text" id="UserName" name="UserName" placeholder="请您输入姓名" maxlength="20" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><em style="color:red">*</em>手机号:</span>
                            <input type="text" id="Tel" name="Tel" placeholder="请输入手机号" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">密码:</span>
                            <input type="password" id="Password" name="Password" placeholder="请输入用户登录密码" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">用户类型:</span>
                            <select id="UserType" name="UserType" class="selectpicker show-tick form-control" data-live-search="true"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon" style="padding-left:10px;">性别:</span>
                            <div class="form-control">
                                <input type="radio" name="Gender" value="1" style="margin-left: 20px;" />男
                                <input type="radio" name="Gender" value="2" style="margin-left: 30px;" />女
                                <input type="radio" name="Gender" value="0" style="margin-left: 30px;" checked="checked" />保密
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">头像:</span>
                            <div class="col-sm-10 camera">
                                <ul class="uploadpic">
                                    <li>
                                        <a href="javascript:void(0);" class="file">
                                            <input type="file" id="file" name="file" class="btnupload" />
                                        </a>
                                    </li>
                                    <li>
                                        <img src="" id="PhotoGraph" />
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-reply"></i>取消</button>
                <button type="button" class="btn btn-primary" id="btnAddEditOK"><i class="fa fa-check"></i>确定</button>
            </div>
        </div>
    </div>
</div>

@*更改用户类别*@
<div class="modal fade" id="UpdateUserTypeModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title" id="HeadTitle">更改用户类别</h4>
            </div>
            <div class="modal-body">
                <form id="updateUserType" method="post" class="form-horizontal">
                    <input type="hidden" id="updatetype_id" name="updatetype_id" />
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">用户昵称:</span>
                            <input type="text" id="nick_name" name="nick_name" readonly="readonly" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">用户类型:</span>
                            <select id="user_type" name="user_type" class="selectpicker show-tick form-control" data-live-search="true"></select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-reply"></i>取消</button>
                <button type="button" class="btn btn-primary" id="btnUpdateUserType"><i class="fa fa-check"></i>确定</button>
            </div>
        </div>
    </div>
</div>

@*查看用户收货地址信息*@
<div class="modal fade" id="QueryAddRess" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title" id="HeadTitle_Address">用户收货地址</h4>
            </div>
            <div class="modal-body">
                <form id="QueryAddRessOperation" method="get" class="form-horizontal">
                    <div class="tab-pane" id="AddRess" style="display:none">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>联系方式</th>
                                    <th>地址</th>
                                    <th>默认</th>
                                    <th>创建时间</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="AddRessNo">
                        <h3 style="color:red;text-align: center;"><i class="fa fa-exclamation-triangle"></i> 该用户还没有配置收货地址！</h3>
                    </div>
                 </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-reply"></i>关闭</button>
            </div>
        </div>
    </div>
</div>

@*查看用户邀请人信息*@
<div class="modal fade" id="QueryUserInvitation" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title" id="HeadTitle_UserInvitation">用户邀请的用户信息</h4>
            </div>
            <div class="modal-body">
                <form id="QueryUserInvitationOperation" method="get" class="form-horizontal">
                    <div class="tab-pane" id="UserInvitation" style="display:none">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>被邀请人用户名</th>
                                    <th>添加方式</th>
                                    <th>内容来源</th>
                                    <th>创建时间</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="UserInvitationNo">
                        <h3 style="color:red;text-align: center;"><i class="fa fa-exclamation-triangle"></i> 您还没有邀请成功过用户呢！</h3>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-reply"></i>关闭</button>
            </div>
        </div>
    </div>
</div>

@*重置密码*@
<div class="modal fade" id="ResetPwdModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title">用户：(<span id="ResetPwd_Head_Title">***</span>)重置密码</h4>
            </div>
            <div class="modal-body">
                <form id="reset_pwd_Operation" method="post" class="form-horizontal">
                    <input type="hidden" id="reset_user_id" name="reset_user_id" />
                    <div class="form-group">
                        <div class="input-group">
                            重置密码为：<label style="color:red;" id="current_password">1234567</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-reply"></i>取消</button>
                <button type="button" class="btn btn-primary" id="btnResetUserPwd"><i class="fa fa-check"></i>确定</button>
            </div>
        </div>
    </div>
</div>

@*删除模型*@
<div class="modal fade" id="DeleteEditModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title">用户：(<span id="Delete_Head_Title">***</span>)删除确认页面</h4>
            </div>
            <div class="modal-body">
                <form id="user_Delete" method="post" class="form-horizontal">
                    <input type="hidden" id="delete_user_id" name="delete_user_id" />

                    <div class="form-group">
                        <div class="input-group">
                            您确认要删除用户<span id="Delete_Head_Title_OK">***</span>吗？
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-reply"></i>取消</button>
                <button type="button" class="btn btn-primary" id="btnDeleteUser"><i class="fa fa-check"></i>确定</button>
            </div>
        </div>
    </div>
</div>

@*详情模型*@
<div class="modal fade" id="DetailModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width:58%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title">用户信息详情</h4>
            </div>
            <div class="modal-body">
                <form id="userDetail" class="form-horizontal">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">用户名:</span>
                            <input type="text" id="Detail_NickName" readonly="readonly" class="form-control" />
                            <span class="input-group-addon">姓名:</span>
                            <input type="text" id="Detail_UserName" readonly="readonly" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">手机号:</span>
                            <input type="text" id="Detail_Tel" readonly="readonly" class="form-control" />
                            <span class="input-group-addon">用户类型:</span>
                            <input type="text" id="Detail_UserType" readonly="readonly" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">OpenId:</span>
                            <input type="text" id="Detail_OpenId" readonly="readonly" class="form-control" />
                            <span class="input-group-addon">性别:</span>
                            <input type="text" id="Detail_Gender" readonly="readonly" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">国家:</span>
                            <input type="text" id="Detail_Country" readonly="readonly" class="form-control" />
                            <span class="input-group-addon">城市:</span>
                            <input type="text" id="Detail_City" readonly="readonly" class="form-control" />                   
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">省份:</span>
                            <input type="text" id="Detail_Province" readonly="readonly" class="form-control" />
                            <span class="input-group-addon">邀请码:</span>
                            <input type="text" id="Detail_InvitationCode" readonly="readonly" class="form-control" />
                            <span class="input-group-addon">创建时间:</span>
                            <input type="text" id="Detail_CreateTime" readonly="readonly" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">头像:</span>
                            <img id="Detail_PhotoGraph" src="" style="width: 100px;height: 100px;margin-left:2px" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/project/min/user.min.js"></script>
<script type="text/javascript">
    $(function () {
        ml.admin.user.init();
    })
</script>